<template>
  <div id="app">
    <div id="musicIcon" :class="['musicIcon',{iconRotate:bgMusic_isPlay}]" @click="toggleBgMusic">
      <img id="asd" src="./assets/img/musicIcon.png" alt="">
    </div>  
     <component :is="curPage"></component> 
    <audio src="static/audio/shakeIce.mp3" id="shake_music" preload="metadata" loop="12"></audio> 
    <audio src="static/audio/stir.mp3" id="stir_music" preload="metadata" loop="1"></audio> 
    <audio src="static/audio/success.mp3" id="success_music" preload="metadata"></audio> 
    <audio src="static/audio/failed.mp3" id="failed_music" preload="metadata"></audio>  
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import home from './components/home'
  import rule from './components/rule'
  import drinkList from './components/drinkList'
  import introduce from './components/introduce'
  import drink from './components/drink'
  import complete from './components/complete'
  import shake from './components/shake'
  import success from './components/success'
  import failed from './components/failed'
  export default {
    name: 'app',
    data(){
      return{
      
      }
    },
    computed:{
      ...mapGetters(['curPage','bgMusic_isPlay'])
    },
    components:{
      home,
      rule,
      drinkList,
      introduce,
      drink,
      complete,
      shake,
      success,
      failed
    },
    methods:{
      toggleBgMusic(){
        // this.bgMusic_isPlay=!this.bgMusic_isPlay
        let isPlay=!this.bgMusic_isPlay;
        this.$store.dispatch('bgMusicPlayToggle',isPlay);
      }
    },
    mounted(){
        let audio_bg=document.getElementById('bg_music');
        let bgBtn=document.getElementById('app');
        let musicIconBtn=document.getElementById('musicIcon');

        let bindBg=function(){
          audio_bg.play();
          bgBtn.removeEventListener('touchstart',bindBg, false);
        };

        bgBtn.addEventListener('touchstart',bindBg, false);

        musicIconBtn.addEventListener('click',(event)=>{
            event.stopPropagation();

            if(!this.bgMusic_isPlay){
              audio_bg.pause();
            }else{
              audio_bg.play();
            }
        })

    }
  }
</script>

<style lang="scss" scoped>
#app {
  position: relative;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  width:100%;
  height:100%;
  audio{
    display:none;
  }
  .musicIcon{
    position:fixed;
    right:3%;
    top:2%;
    z-index:999;
    width:35px;
    height:35px;
    img{
      width:100%;
      height:100%;
    }
  }
  
}

</style>
